<script type='text/javascript' src='<?php echo $this->webroot; ?>js/plugins/jflot/jquery.flot.js'></script>    
<script type='text/javascript' src='<?php echo $this->webroot; ?>js/plugins/jflot/jquery.flot.stack.js'></script>    
<script type='text/javascript' src='<?php echo $this->webroot; ?>js/plugins/jflot/jquery.flot.pie.js'></script>
<script type='text/javascript' src='<?php echo $this->webroot; ?>js/plugins/jflot/jquery.flot.resize.js'></script>

<div class="page-header">
    <div class="icon">
        <span class="ico-chart-2"></span>
    </div>
    <h1>Ventas<small>Por ventas</small></h1>
</div>

<div class="row-fluid">

    <div class="block">
        <div class="head">
            <h2>La Paz</h2>
        </div>
        <div class="data">
            <div id="crt" style="height: 500px;"></div>
        </div>  

    </div>  

    <div class="block">
        <div class="head purple">
            <div class="icon"><span class="ico-location"></span></div>
            <h2>With hover</h2>     
            <ul class="buttons">
                <li><a href="#" onClick="source('table_hover');
                        return false;"><div class="icon"><span class="ico-info"></span></div></a></li>
            </ul>                                                          
        </div>                
        <div class="data-fluid">
            <table cellpadding="0" cellspacing="0" width="100%" class="table table-hover">
                <thead>
                    <tr>
                        <th width="25%">
                            Email
                        </th>
                        <th width="25%">
                            Name
                        </th>
                        <th width="25%">
                            Code
                        </th>
                        <th width="25%">
                            Post
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <a href="#">dmitry@domain.com</a>
                        </td>
                        <td>
                            Dmitry Ivaniuk
                        </td>
                        <td>
                            DT-SV35582
                        </td>
                        <td>
                            <span class="label label-success">Developer</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">olga@domain.com</a>
                        </td>
                        <td>
                            Olga Ivaniuk
                        </td>                                
                        <td width="25%">
                            DS-SV34522
                        </td>      
                        <td width="25%">
                            <span class="label label-warning">Economist</span>
                        </td>                                
                    </tr>
                    <tr>
                        <td>
                            <a href="#">alex@domain.com</a>
                        </td>
                        <td>
                            Alex Fruz
                        </td>         
                        <td width="25%">
                            DV-SV41222
                        </td>  
                        <td width="25%">
                            <span class="label label-info">Developer</span>
                        </td>                                  
                    </tr>
                    <tr>
                        <td>
                            <a href="#">helen@domain.com</a>
                        </td>
                        <td>
                            Helen Simonchuk
                        </td>                                                                
                        <td width="25%">
                            DV-ST32212
                        </td>   
                        <td width="25%">
                            <span class="label label-important">Promoter</span>
                        </td>                                  
                    </tr>
                    <tr>
                        <td>
                            <a href="#">valentin@domain.com</a>
                        </td>       
                        <td>
                            Valentin Ratushev
                        </td>        
                        <td width="25%">
                            DV-WR21677
                        </td>    
                        <td width="25%">
                            <span class="label">Lawyer</span>
                        </td>                                
                    </tr>                           
                </tbody>
            </table>
        </div>                
    </div>

</div>
<script type="text/javascript">
if($("#crt").length > 0){

        /* CHART - 1*/       
                        
        var visits = [[1, 1235], [2, 1245], [3, 1590], [4, 1420], [5,1713], [6,1921], [7,1869], [8, 1790], [9,2314], [10,2490], [11,2175], [12,1989]];
        var unique = [[1, 140], [2, 246], [3, 530], [4, 788], [5,832], [6,962], [7,1280], [8, 1299], [9,1410], [10,1569], [11,1492], [12,1350]];
        var sales = [[1, 50], [2, 100], [3, 140], [4, 190], [5,250], [6,360], [7,440], [8, 650], [9,750], [10,810], [11,980], [12,1102]];
        
        $.plot($("#crt"), [ { data: visits, label: "Ventas"}, { data: unique, label: "Pedidos"}, {data: sales, label: "Facturados"} ], {
            
                series: {lines: { show: true }, points: { show: true }},
                grid: { hoverable: true, clickable: true },
                yaxis: { min: 1, max: 3000, tickLength: 0 },
                xaxis: { labelWidth: 30, tickLength: 0 }
                });

        /* eof CHART - 1*/
    
    }               
</script>
